<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/empty_page.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:52 GMT -->
<head>
	<#include "../common/layout/head.ftl" >
	<#include "../common/base/base_css.ftl" >
	<#include "../common/base/base_js.ftl" >
</head>

<body class="gray-bg">
    <div class="row wrapper border-bottom white-bg page-heading">
	    <div class="wrapper wrapper-content">
	        <div class="row">
	    		<div class="panel-body" style="padding-bottom:0px;">
	        <div class="panel panel-default">
	            <div class="panel-heading">查询条件</div>
	            <div class="panel-body">
	                <form id="formSearch" action="javascript:void(0)" class="form-horizontal" onsubmit="BaseAction.refreshTable('tb_variable');">
	                    <div class="form-group"  style="margin-top:15px">
	                        <label class="control-label col-sm-1" for="name">变量名称</label>
	                        <div class="col-sm-3">
	                            <input type="text" class="form-control" id="name">
	                        </div>
	                        <div class="col-sm-4" style="text-align:left;">
	                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
	                        </div>
	                    </div>
	                </form>
	            </div>
	        </div>       
	        <div id="toolbar" class="btn-group">
	            <button  id="btn_add"  type="button" class="btn btn-outline btn-default" title="添加">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                 <button id="btn_edit"  type="button" class="btn btn-outline btn-default" title="修改">
                    <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
                </button>
                <button id="btn_delete"  type="button" class="btn btn-outline btn-default" title="删除">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
	        </div>
	        <table id="tb_variable"></table>
	    			
	        </div>
    </div>
    
    <!--添加修改模态框 begin-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
	  <div class="modal-dialog">  
	    <div class="modal-content">  
	      <div class="modal-header">  
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
	        <h4 class="modal-title" id="myModalLabel">标题</h4>  
	      </div>  
	      <div style="padding:5px;">  
	      <div class="modal-body" data-scrollbar="true" data-height="200" data-scrollcolor="#000">  
		  		<form  id="myForm" class="form-horizontal" action="variable/create" role="form" method="post">
				    <div class="form-group">
                        <input type="hidden" name="id">
				        <label class="col-sm-2 control-label">字段名</label>
				        <div class="col-sm-7">
                            <input type="text" class="form-control"  name="name" placeholder="字段名">
				        </div> 
				    </div> 
				    <div class="form-group"> 
				        <label  class="col-sm-2 control-label">字段值</label>
				        <div class="col-sm-7">
				            <input type="text" class="form-control"  name="value" placeholder="字段值">
				        </div> 
				    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-7">
                            <textarea class="form-control" name="remark"></textarea>
                        </div>
                    </div>
				</form>
		  </div>
	      </div>  
	      <div class="modal-footer">  
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button"  class="btn btn-primary" id="btn_submit" >保存 </button>
	      </div>
	    </div>  
	  </div>  
	</div>  
    <!--添加修改模态框 end-->
    
    <script>
    		$(function () {
				console.info('初始化Table');	
			    //1.初始化Table
			    var oTable = new TableInit();
			    oTable.Init();
				console.info('初始化Button的点击事件')
			    //2.初始化Button的点击事件
			    var oButtonInit = new ButtonInit();
			    oButtonInit.Init();
			});
			
			
			var TableInit = function () {
			    var oTableInit = new Object();
			    //初始化Table
			    oTableInit.Init = function () {
			        $('#tb_variable').bootstrapTable({
			            url: 'variable/data',         //请求后台的URL（*）
			            method: 'post',                      //请求方式（*）
			            toolbar: '#toolbar',                //工具按钮用哪个容器
			            striped: true,                      //是否显示行间隔色
			            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			            pagination: true,                   //是否显示分页（*）
			            sortable: true,                     //是否启用排序
			            sortOrder: "asc",                   //排序方式
			            queryParams: oTableInit.queryParams,//传递参数（*）
			            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
			            pageNumber:1,                       //初始化加载第一页，默认第一页
			            pageSize: 10,                       //每页的记录行数（*）
			            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
			            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			            strictSearch: true,
			            showColumns: true,                  //是否显示所有的列
			            showRefresh: true,                  //是否显示刷新按钮
			            minimumCountColumns: 2,             //最少允许的列数
			            clickToSelect: true,                //是否启用点击选中行
			            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
			            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
			            cardView: false,                    //是否显示详细视图
			            detailView: false,                   //是否显示父子表
			            columns: [{
			                checkbox: true
			            }, {
			                field: 'name',
			                title: '序号',
			                align: 'center',
		                    valign: 'left',
			                formatter: function(value,row,index){  
		                    	return index+1;
		                    }
			            },{
			                field: 'name',
			                title: '字段名称',
			                align: 'center',
		                    valign: 'middle',
		                    sortable: true,
			            }, {
			                field: 'value',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
			                title: '字段值'
			            }, {
			                field: 'remark',
			                title: '描述',
			                align: 'center',
		                    valign: 'left',
		                    sortable: true,
		                    formatter: function(value,row,index){  
		                    	return value;
		                    }
			            }, ]
			        });
			    };
			
			    //得到查询的参数
			    oTableInit.queryParams = function (params) {
			    	//扩展查询参数
			    	params.name=$("#name").val();
			        console.info('上送分页信息',params)
			        return params;
			    };
			    console.info(oTableInit)
			    return oTableInit;
			};
			
			var ButtonInit = function () {
			    var oInit = new Object();
			    var postdata = {};
			    var validator={};//验证表单对象
			
			    oInit.Init = function () {
			        //初始化页面上面的按钮事件
			        $('#btn_add').click(function(){
			        	console.info('添加');
                        validator.resetForm();
                        BaseAction.resetForm();
                        BaseAction.setTitle('添加参数');
			        });
					//修改数据
			        $('#btn_edit').click(function(){
						BaseAction.getList('tb_variable',function(list){
                            if(list.length==1){
                                validator.resetForm();
                                BaseAction.resetForm();
                                console.info('修改');
                                var obj=list[0];
                                BaseAction.bindingForm('myForm',obj);
                                BaseAction.setTitle('修改参数');
                            }else{
                                Toast.warning('请选择要修改的记录，且只能选择一行！');
                            }
						});
			        });
					//删除数据
			        $('#btn_delete').click(function(){
                        BaseAction.getList('tb_variable',function(list){
                            if(list.length!=0){
                            	var ids=[];
                            	for(var i in list){
                                    ids.push(list[i].id);
								}
                                console.info('删除');
                                BaseAction.save('variable/delete',{ids:ids.join(',')},function(data){
                                    if(data.status!=0){
                                        Toast.success(data.msg);
                                    }else{
                                        Toast.error(data.msg);
                                    }
                                    BaseAction.refreshTable('tb_variable');
                                });

                            }else{
                                Toast.warning('请选择要删除的记录！');
                            }
                        });
			        });
					//查询表格数据
			        $('#btn_query').click(function(){
			        	console.info('查询');
                        BaseAction.refreshTable('tb_variable');
			        });
					//表单提交
			        $('#btn_submit').click(function(){
                        $('#myForm').submit();
                    });
					//表单验证并提交数据
                    validator=$('#myForm').validate({
                        messages:{
                            name: "字段名不能为空！",
                            value: "字段值不能为空！",
                            remark:{
                                maxlength:'备注长度小于200个字符！'
                            }
                        },
                        rules:{
                            name: "required",
                            value: "required",
                            remark:{
                                maxlength: 200
                            }
                        },
                        submitHandler:function(form){

                        	//需要处理类型在这里转型

                            BaseAction.save($(form).attr('action'),$(form).serialize(),function(data){
                                if(data.status==1){
                                    $('#myModal').modal('hide');
                                    Toast.success(data.msg);
                                    BaseAction.refreshTable('tb_variable');
                                }else{
                                    Toast.error(data.msg);
                                }
                            });
                        }
                    });
			    };
			    return oInit;
			};
    </script>
</body>
</html>
